<link href="/css/admin.css" rel="stylesheet">
<section data-ng-controller="AdminController" ng-cloak>
    <header>
        <div id="hello">Hi {{global.username}}, <a href="" data-ng-click="logout()"><i class="fa fa-power-off"></i> logout</a></div>
        <!-- Search bar -->
        <div id="search-bar" class="input-group">
            <input type="text" class="form-control" placeholder="Search">

            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
            </div>
        </div>
    </header>
    <div id="admin-container">
        <div class="row" data-ng-controller="userController" data-ng-init="viewProfile()">
            <div class="col-lg-12">
                <!-- Timeshelf Avatar - TrungNM -->
                <div id="timeshelf-profile" class="row">
                    <div id="timeshelf-ava" data-ng-init="getProfile()" class="col-md-4 row">
                        <div class="col-md-5">
                        <span class="image avatar-large" ng-click="uploadAvatar()" data-ng-if="isCreator"><a href="#" ><img ng-src="{{user.avatar}}" alt=""/></a></span>
                        <span class="image avatar-large" data-ng-if="!isCreator"><a href="#" ><img ng-src="{{user.avatar}}" alt=""/></a></span>
                        <input ng-file-select type="file" id="upload-avatar" style="display: none" data-ng-if="isCreator">
                        <button id="avatar-button" type="button" ng-click="uploader.uploadAll()" style="display: none" data-ng-if="isCreator"></button>
                        </div>
                        <div class="col-md-7">
                        <h1>{{user.local.username}}</h1>
                        <span class="byline">{{user.lastName}} {{user.firstName}}</span>
                        <p data-ng-show="user.isBanned"><b>is banned</b></p>
                        <p data-ng-show="!user.isBanned"><b>on active</b></p>
                        <p><i>{{ 'JOIN_DATE' | translate}}</i>
                        <p><i>{{user.createDate | dateTimeFilter:'full'}}</i></p>
                        </div>
                    </div>

                    <div id="timeshelf-link" class="col-md-8">
                        <ul>
                            <li data-ng-if="!user.isBanned"><a href="#" data-ng-click="ban(user._id,'u')"><i class="fa fa-times fa-fw"></i> Ban</a></li>
                            <li data-ng-if="user.isBanned"><a href="#" data-ng-click="active(user._id,'u')"><i class="fa fa-check fa-fw"></i> Active</a></li>
                        </ul>
                        <!--<ul>-->
                        <!--<li><a href=""><i class="fa fa-plus-circle fa-fw"></i>Add friend!</a></li>-->
                        <!--<li><mi-add-friend></mi-add-friend></li>-->
                        <!--<li><a href="/profile"><i class="fa fa-info fa-fw"></i>View {{ownerMin.username}}'s profile</a></li>-->
                        <!--<li><a href=""><i class="fa fa-user fa-fw"></i>There're {{ownerMin.friendCount}} friends</a></li>-->
                        <!--&lt;!&ndash;<li><a href=""><i class="fa fa-check fa-fw"></i>Joined {{ownerMin.eventCount}} events</a></li>&ndash;&gt;-->
                        <!--&lt;!&ndash;<li><a href="#" data-toggle="modal" data-target="#new-message-modal" data-ng-click="openMessagePopup()"><i class="fa fa-envelope fa-fw"></i>Send {{ownerMin.username}} messages</a></li>&ndash;&gt;-->
                        <!--<li><a href="#" data-ng-click="openMessagePopup()"><i class="fa fa-envelope fa-fw"></i>Send {{ownerMin.username}} messages</a></li>-->
                        <!--</ul>-->
                    </div>
                </div>


                <ul class="nav nav-tabs" id="profile-tab">
                    <li id="tab-profile-info" class="active"><a href="#profile-info" data-toggle="tab">{{ 'INFOMATION' | translate}}</a></li>
                    <li id="tab-profile-friend"><a href="#profile-friend" data-toggle="tab">{{ 'FRIENDS' | translate}}</a></li>
                    <li id="tab-profile-event"><a href="#profile-event" data-toggle="tab">{{ 'HIGHLIGHT' | translate}}</a></li>
                </ul>

                <div class="tab-content" id="user">
                    <div class="tab-pane active" id="profile-info">
                        <!--anh bug-->
                        <button data-ng-if="isCreator" class="btn-style top-right-btn" data-ng-click="openEditProfilePopup()">
                            {{ 'BUTTON_EDIT' | translate}}
                        </button>

                        <table class="info">
                            <tr>
                                <td>
                                    <div>
                                        <h1>{{ 'BASIC_INFOMATION' | translate}}</h1>
                                        <p><b>{{ 'FIRST_NAME' | translate}}:</b> {{user.firstName}}</p>
                                        <p><b>{{ 'LAST_NAME' | translate}}:</b> {{user.lastName}}</p>

                                        <p><b>{{ 'EMAIL' | translate}}: </b><span data-ng-if="!isCreator">{{hideEmail}}</span><span data-ng-if="isCreator">{{user.email}}</span> </p>

                                        <p data-ng-if="user.showBirthday == 'y'"><b>{{ 'BIRTHDAY' | translate}}:</b> {{user.birthday}}</p>

                                        <p><b>{{ 'GENDER' | translate}}:</b><span data-ng-if="user.gender = 'male'"> Male </span></p>

                                        <p><b>{{ 'LOCATION' | translate}}: </b><span data-ng-if="!user.location">  N/A</span><span data-ng-if="user.location">{{user.location}}</span></p>

                                        <p><b>{{ 'LANGUAGE' | translate}}:</b><span data-ng-if="user.language == 'vi'"> Vietnamese</span><span data-ng-if="user.language == 'en'"> English</span></p>
                                    </div>
                                <td>
                                    <div>
                                        <h1>{{ 'ABOUT' | translate}}</h1>
                                        <p data-ng-if="!user.aboutMe" > N/A </p>
                                        <p data-ng-if="user.aboutMe != ''">{{user.aboutMe}}</p>
                                    </div>
                                    <div>
                                        <h1>{{ 'WORK' | translate}}</h1>

                                        <p><b>{{'OCCUPATION'|translate}}: </b><span data-ng-if="!user.occupation">N/A</span><span data-ng-if="user.occupation">{{user.occupation}}</span></p>

                                        <p><b>{{'WORKPLACE'|translate}}: </b><span data-ng-if="!user.workplace">N/A</span><span data-ng-if="user.workplace">{{user.workplace}}</span></p>

                                        <p><b>{{'STUDY_PLACE'|translate}}: </b><span data-ng-if="!user.studyPlace">N/A</span><span data-ng-if="user.studyPlace">{{user.studyPlace}}</span></p>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="tab-pane" id="profile-friend">

                        <div class="friend" data-ng-repeat="friend in friendList">
                            <span class="image avatar-large"><a href="/timeshelf/{{friend.userID}}"><img src="{{friend.avatar}}" alt=""/></a></span>

                            <a href="/timeshelf/{{friend.userID}}"><h1>{{friend.username}}</h1></a>
                            <span class="byline">{{friend.fullName}}</span>

                        </div>


                    </div>

                    <div class="tab-pane" id="profile-event">

                        <div class="event-list" data-ng-repeat="post in highlightList" >
                            <span class="image event-cover"><a href="/event/view/{{post._id}}"></a><img src="{{post.cover}}" alt=""/></a></span>

                            <h1>{{post.name}}</h1>

                            <p><b>{{'START_TIME'|translate}}:</b>{{post.startTime | dateTimeFilter:'full'}}</p>

                            <p><b>{{'LOCATION'|translate}}</b> {{post.location}}</p>
                        </div>
                        <div class="event-list">
                                                <span class="image event-cover"><img src="img/pic01.jpg"
                                                                                     alt=""/></span>

                            <h1>Example Event</h1>

                            <p><b>Role:</b> Holder</p>

                            <p><b>Participated at:</b> 1/1/2000</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

